<template>
    <div>
        <div>
            <a-card>
                <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState"
                    @finish="onFinish">
                    <a-row :gutter="24">
                        <template v-for="i in searchFieldOptions.length" :key="i">
                            <a-col v-show="expand || i <= 3" :span="8">
                                <!-- :rules="[{ required: true, message: 'input something' }]" -->
                                <a-form-item :name="`${searchFieldOptions[i - 1]?.value}`"
                                    :label="`${searchFieldOptions[i - 1]?.label}`">
                                    <a-input v-if="searchFieldOptions[i - 1]?.type === 'input'"
                                        v-model:value="formState[`${searchFieldOptions[i - 1]?.value}`]" placeholder="请输入">
                                    </a-input>
                                    <a-select v-if="searchFieldOptions[i - 1]?.type === 'select'"
                                        v-model:value="formState[`${searchFieldOptions[i - 1]?.value}`]" placeholder="请选择">
                                        <a-select-option v-for="item in searchFieldOptions[i - 1]?.options"
                                            :key="item.value" :value="item.value">
                                            {{ item.label }}
                                        </a-select-option>
                                    </a-select>
                                    <a-range-picker v-if="searchFieldOptions[i - 1]?.type === 'time'"
                                        v-model:value="formState[`${searchFieldOptions[i - 1]?.value}`]" show-time
                                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                                </a-form-item>

                            </a-col>
                        </template>
                    </a-row>
                    <a-row>
                        <a-col :span="24" style="text-align: right">
                            <a-button type="primary" html-type="submit">查询</a-button>
                            <a-button style="margin: 0 8px" @click="() => formRef.resetFields()">重置</a-button>
                            <a style="font-size: 12px" @click="expand = !expand">
                                <template v-if="expand">
                                    <UpOutlined /> 收起
                                </template>
                                <template v-else>
                                    <DownOutlined /> 展开
                                </template>
                                <!-- Collapse -->
                            </a>
                        </a-col>
                    </a-row>
                </a-form>
            </a-card>
        </div>
        <!-- background: #fff;  -->
        <div class="search-result-list" style="padding-top: 30px;">
            <a-card title="查询表格" :bordered="true">
                <template #extra>
                    <a-space>
                        <a-button class="purple" type="primary" html-type="submit">新建</a-button>
                        <a-button class="red" type="primary" html-type="submit">批量删除</a-button>
                        <a-button class="geekblue" type="primary" html-type="submit">导出</a-button>
                        <a-button class="purple" type="primary" html-type="submit">导入收集</a-button>
                    </a-space>
                </template>
                <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }"
                    :row-key="(record: any) => record.key" :loading="loading" :pagination="pagination">
                    <template #bodyCell="{ column }">
                        <template v-if="column.key === 'operation'">
                            <a-space warp>
                                <a-button class="orange" type="primary" html-type="submit">详情</a-button>
                                <a-button class="green" type="primary" html-type="submit">重新收集</a-button>
                                <a-button type="primary" html-type="submit" danger>删除</a-button>
                            </a-space>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { TableColumnsType, FormInstance } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';


const columns: TableColumnsType = [
    { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
    { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
    { title: 'Column 1', dataIndex: 'address', key: '1', width: 100 },
    { title: 'Column 2', dataIndex: 'address', key: '2', width: 100 },
    { title: 'Column 3', dataIndex: 'address', key: '3', width: 100 },
    { title: 'Column 4', dataIndex: 'address', key: '4', width: 100 },
    { title: 'Column 5', dataIndex: 'address', key: '5', width: 100 },
    { title: 'Column 6', dataIndex: 'address', key: '6', width: 100 },
    { title: 'Column 7', dataIndex: 'address', key: '7', width: 100 },
    { title: 'Column 8', dataIndex: 'address', key: '8', width: 100 },
    {
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 210,
        // width: 150,

    },
];

interface DataItem {
    key: number;
    name: string;
    age: number;
    address: string;
}

const data: DataItem[] = [];
for (let i = 0; i < 100; i++) {
    data.push({
        key: i,
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
    });
}

let pagination = ref({
    // 数据总数
    total: data.length,
    // 当前页数
    //   current: 1,
    // 每页条数
    //   pageSize: 4,
    // 展示总数
    showTotal: (total: any) => `共 ${total} 条`,
    // 是否可以改变pageSize
    showSizeChanger: true,
    // 设置每页可以展示多少条的选项
    //   pageSizeOptions: ["2", "5", "8", "4"],
    // 改变pageSize后触发
    //   showSizeChange: (current: number, pageSize: any) => (
    //     (pagination.value.current = current), (pagination.value.pageSize = pageSize)
    //   ),
    // 小尺寸分页
    size: "small",
    // 是否可以快速跳转至某页
    showQuickJumper: true,
    //默认条数
    defaultPageSize: 20,
});
let loading = ref<boolean>(false);

const expand = ref(false);
const formRef: any = ref<FormInstance>();
const formState: any = reactive({});
const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    console.log('formState: ', formState);
};

// 查询字段
const searchFieldOptions = [
    { label: '软件名称', value: 'softName', type: 'input' },
    { label: '软件版本', value: 'softVersion', type: 'input' },
    { label: 'git地址', value: 'gitUrl', type: 'input' },
    { label: '编程语言', value: 'language', type: 'input' },
    {
        label: '状态', value: 'status', type: 'select',
        options: [{
            label: '进行中',
            value: '0',
        }, {
            label: '成功',
            value: '1',
        }, {
            label: '失败',
            value: '2',
        }]
    },
    { label: '时间范围', value: 'timeRange', type: 'time' },
];
</script>

<style scoped>
.ant-btn {
    &.orange {

        &,
        &:active,
        &.active {
            color: #fff !important;
            background-color: #ff9900 !important;
            border-color: #ff9900 !important;
        }

        &:hover,
        &:focus {
            background-color: #ffad33 !important;
            border-color: #ffad33 !important;
        }
    }

    &.green {

        &,
        &:active,
        &.active {
            color: #fff !important;
            background-color: #19be6b !important;
            border-color: #19be6b !important;
        }

        &:hover,
        &:focus {
            background-color: #47cb89 !important;
            border-color: #47cb89 !important;
        }
    }

    &.light-blue {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: #2db7f5;
            border-color: #2db7f5;
        }

        &:hover,
        &:focus {
            background-color: #57c5f7;
            border-color: #57c5f7;
        }
    }

    &.red {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: #ed4014;
            border-color: #ed4014;
        }

        &:hover,
        &:focus {
            background-color: #f16643;
            border-color: #f16643;
        }
    }

    &.pink {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: pink;
            border-color: pink;
        }

        &:hover,
        &:focus {
            background-color: pink;
            border-color: pink;
        }
    }

    &.cyan {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: cyan;
            border-color: cyan;
        }

        &:hover,
        &:focus {
            background-color: cyan;
            border-color: cyan;
        }
    }

    &.purple {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: purple;
            border-color: purple;
        }

        &:hover,
        &:focus {
            background-color: purple;
            border-color: purple;
        }
    }

    &.magenta {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: magenta;
            border-color: magenta;
        }

        &:hover,
        &:focus {
            background-color: magenta;
            border-color: magenta;
        }
    }

    &.gold {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: gold;
            border-color: gold;
        }

        &:hover,
        &:focus {
            background-color: gold;
            border-color: gold;
        }
    }

    &.lime {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: lime;
            border-color: lime;
        }

        &:hover,
        &:focus {
            background-color: lime;
            border-color: lime;
        }
    }

    &.volcano {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: #f50;
            border-color: #f50;
        }

        &:hover,
        &:focus {
            background-color: #f50;
            border-color: #f50;
        }
    }

    &.defineblue {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: #2db7f5;
            border-color: #2db7f5;
        }

        &:hover,
        &:focus {
            background-color: #2db7f5;
            border-color: #2db7f5;
        }
    }

    &.geekblue {

        &,
        &:active,
        &.active {
            color: #fff;
            background-color: #3853e2;
            border-color: #3853e2;
        }

        &:hover,
        &:focus {
            background-color: #3853e2;
            border-color: #3853e2;
        }
    }
}
</style>

<!--
    &[disabled] {
      .color-disabled
    }
    报错的
 -->

 <!-- &.red {
    &, &:active, &.active {
      color: #fff;
      background-color: #ed4014;
      border-color: #ed4014;
    }
    &:hover, &:focus {
      background-color: #f16643;
      border-color: #f16643;
    }
    &[disabled] {
      .color-disabled
    }
  } -->